<template>
    <div class="wrapper">
        <div class="topbar">
            <!-- 顶部导航 -->
            <div class="topCenter">
                <router-link to="/" class="home">
                    <van-icon name="wap-home-o" size="34" color="#333" />
                </router-link>
                <span class="logo">网易严选</span>
                <router-link to="/search" class="search">
                    <van-icon name="search" size="34" color="#333" />
                </router-link>
                <router-link to="/cart" class="shopCar">
                    <van-icon name="shopping-cart-o" size="34" color="#333" />
                </router-link>
            </div>
            <!-- 导航 -->
            <div class="topNav">
                <van-tabs v-model:active="active" title-active-color="#dd1a21" line-height=".03rem" color="#dd1a21"
                    scrollspy @click-tab="handlerChange">
                    <van-tab v-for="categoryL2, index in getGoodsList.categoryL2List" :key="index"
                        :title="categoryL2.name" :name="categoryL2.id">
                    </van-tab>
                </van-tabs>
            </div>
            <van-divider />
            <!-- 内容 -->
            <div class="content">
                <span class="title">{{ getGoodsList.categoryItems.category?.frontName }}</span>
                <div class="contentItemcontainer">
                    <div class="contentItem" v-for="categoryItem in getGoodsList.categoryItems.itemList"
                        :key="categoryItem.id" @click="$router.push('/detail')">
                        <img :src="categoryItem.listPicUrl">
                        <span class="contentItemspan">{{ categoryItem.name }}</span>
                        <div class="redpacket" v-if="categoryItem.itemTagList[0]?.type">
                            <van-icon name="point-gift" color="red" />
                            {{ categoryItem.itemTagList[0]?.name }}
                        </div>
                        <span class="atlast" v-if="categoryItem.finalPriceInfoVO.priceInfo.finalPrice">
                            {{ categoryItem.finalPriceInfoVO.priceInfo.finalPrice.prefix }}￥</span><span class="price">
                            {{ categoryItem.retailPrice }}
                        </span>
                        <div class="activity" v-if="categoryItem.finalPriceInfoVO.banner">
                            {{ categoryItem.finalPriceInfoVO.banner.content }}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { useCategoryStore } from '@/stores/useCategoryList'
import { useRoute } from 'vue-router';
const active = ref(0);
const route = useRoute()
const getGoodsList = useCategoryStore()
// 获取id参数
const categoryId = route.query.categoryId
console.log(categoryId);

const subCategoryId = route.query.subCategoryId

// 获取列表数据
const getNewGoodsList = async (subCategoryId: any, categoryId: any) => {
    await getGoodsList.getGoodsDetailList(subCategoryId, categoryId)
}
// 切换展示内容
const handlerChange = (tid: any, title: any) => {
    const subCategoryId2 = tid.name
    getNewGoodsList(subCategoryId2, categoryId)
}
onMounted(() => {
    getNewGoodsList(subCategoryId, categoryId)
})
</script>

<style scoped>
.wrapper .topbar {
    width: 10rem;
    height: 1.17rem;
    background-color: #fafafa;
    position: relative;
}

.wrapper .topCenter {
    width: 10rem;
    height: 1.17rem;
    line-height: 1.17rem;
    border-bottom: .03rem solid #f0f0fb;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: white;
}

.wrapper.topbar.home {
    margin-left: .27rem;

}

.wrapper .logo {
    font-size: .53rem;
    color: #333;
    margin-left: 2.67rem;
    margin-right: 1.47rem;
    font-weight: 700;
    line-height: 1.47rem;
}

.wrapper .search {
    margin-left: .4rem;

}

.wrapper .shopCar {
    margin-left: .4rem;
}

.topNav {
    position: fixed;
    top: 1.17rem;
    left: 0;
    height: 1.07rem;
    background-color: #dfdfdf;
}

::v-deep(.van-tabs__nav) {
    height: .8rem;
}

.content {
    width: 10rem;
    margin-top: 2.13rem;
}

.content .title {
    width: 100%;
    display: block;
    padding-left: 3.2rem;
    font-size: .37rem;
    margin: .27rem 0;
}

.content .contentItem {
    width: 4.6rem;
    height: 8.07rem;
    margin: .19rem;
}

.contentItem img {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: .27rem;
}

.contentItemspan {
    font-size: .32rem;
    display: block;
}

.redpacket {
    font-size: .32rem;
    border-radius: .27rem;
    border: .03rem solid #fafafa;
    background-color: #f0f0fb;
    width: 1.87rem;
}

.contentItemcontainer {
    width: 10rem;
    display: flex;
    /* 子元素溢出换行 */
    flex-flow: row wrap
}

.atlast {
    color: red;
    font-size: .32rem;
}

.price {
    color: red;
    font-size: .53rem;
    font-weight: 700;
}

.activity {
    font-size: .32rem;
    border-radius: .27rem;
    border: .03rem solid #fafafa;
    background-color: red;
    color: #f0f0fb;
    text-align: center;
    margin-top: .13rem;
    width: 2.13rem;
}
</style>